import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

const Hltj = () => {
  const chartRef = useRef(null);

  useEffect(() => {
    const chart = echarts.init(chartRef.current);

    const option = {
      xAxis: {
        type: 'category',
        top: '2%',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisLabel: {
          color: 'white' // 将 x 轴上的标签内容设置为白色
        }
      },
      yAxis: {
        name: '水位(mm)',
        nameTextStyle: {color: 'white' },
        type: 'value',
        axisLabel: {color: 'white' }
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          smooth: true,
          areaStyle: {color: 'rgb(51,152,219)' }
        }
      ]
    };

    chart.setOption(option);

    return () => {
      chart.dispose();
    };
  }, []);
  return <div ref={chartRef} style={{ 
    width: '87%',
    height: '85%',
    marginLeft:15
  }} />;
};

export default Hltj;